<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>Registration</title>
    <link href="../static/css/style.css" th:href="@{/css/style.css}"  rel="stylesheet">
    <link href="../static/css/style-responsive.css" th:href="@{/css/style-responsive.css}" rel="stylesheet">

    <script src="../static/js/html5shiv.js" th:src="@{/js/html5shiv.js}"></script>
    <script src="../static/js/respond.min.js" th:src="@{/js/respond.min.js}"></script>
</head>

<body class="login-body">

<div class="container">

    <form class="form-signin" action="/user/register" method="post" id="signupForm">
        <div class="form-signin-heading text-center">
            <h1 class="sign-title">Registration</h1>
            <img src="../static/images/login-logo.png" th:src="@{/images/login-logo.png}" alt=""/>
        </div>
        <div class="login-wrap">
            <p>请输入个人详细信息</p>
            <input type="text" placeholder="姓名" name="fullName" class="form-control">
            <input type="text" placeholder="住址" name="address" class="form-control">
            <input type="text" placeholder="邮箱" id="email" name="email" class="form-control">
            <label class="error" id="email_error"></label>
            <input type="text" placeholder="城市" name="city" class="form-control" >
            <div class="radios">
                <label for="radio-01" class="label_radio col-lg-6 col-sm-6">
                    <input type="radio" checked="" value="男" id="radio-01" name="sex"> Male
                </label>
                <label for="radio-02" class="label_radio col-lg-6 col-sm-6">
                    <input type="radio" value="女" id="radio-02" name="sex"> Female
                </label>
            </div>

            <p> Enter your account details below</p>
            <input type="text" autofocus="" placeholder="用户名" name="username" class="form-control">
            <input type="password" placeholder="密码" name="password" class="form-control">
            <input type="password" placeholder="重新输入密码" name="confirm_password" class="form-control">
            <input type="submit" class="btn btn-primary btn-lg btn-block" value="注册">
            <div class="registration">
                已存在账号.
                <a href="login.html" class="">
                    登录
                </a>
            </div>
        </div>
    </form>

</div>

<script src="../static/js/jquery.js" th:src="@{/js/jquery.js}"></script>
<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
<script src="../static/js/jquery.validate.min.js" th:src="@{/js/jquery.validate.min.js}"></script>
</body>

<script>

    $("#signupForm").validate({
        rules: {
            address: "required",
            city: "required",
            gender: "required",
            fullName: {
                required: true,
                minlength: 2,
                maxlength: 15
            },
            email: {
                required: true,
                email: true
            },
            username: {
                required: true,
                minlength: 2,
                maxlength: 8
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 10
            },
            confirm_password: {
                required: true,
                equalTo: "[name=password]"
            }
        },
        messages: {
            fullName: {
                required: "请输入姓名",
                minlength: "最少2个字符",
                maxlength: "最多15个字符"
            },
            username: {
                required: "请输入用户名",
                minlength: "最少2个字符",
                maxlength: "最多8个字符"
            },
            password: {
                required: "请输入密码",
                minlength: "最少6个字符",
                maxlength: "最多10个字符"
            },
            address: {
                required: "请输入地址"
            },
            city: {
                required: "请输入所在城市"
            },
            confirm_password: {
                required: "请重新输入密码"
            },
            email: {
                required: "请输入邮箱"
            }
        }
    })

    //定义异步验证邮箱是否注册
    //当失去焦点时自动触发验证
    $("#email").blur(function (){
        //异步操作
        let email = $("#email").val();
        $.ajax({
            url: "/user/validateEmail",   //异步交互的请求地址
            //data: {"email" : email},   //异步请求的请求参数    一般是json格式  {key:value}
            data: JSON.stringify({"email" : email}),   //json格式的字符串
            contentType: "application/json;charset=UTF-8",   //数据类型  可选项
            type: "POST",   //请求类型
            success: function (result) {    //服务端成功处理完之后默认执行的函数    result服务端返回的结果
                console.log(result)
                if (result.msg == "success"){
                    $("#email_error").text("当前邮箱可用")
                }else {
                    $("#email_error").text("当前邮箱已注册")
                }
            }
        })
    })
</script>
</html>
